<template>
    <div>
        <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-tabs v-model:active="activeName" @click-tab="clicktab">
            <van-tab title="全部" name="whole">
                <div v-for="item in responseData" class="zongdata">
                    <div class="userddtop">
                        <p>订单号:{{ item.orderCode }}</p>
                        <p class="buttomm">已评价</p>
                    </div>
                    <hr>
                    <div v-for="item1 in item.productList" :key="item1.shop_id" class="userddz">
                        <img :src="item1.shop_proImg" alt="">
                        <p>{{ item1.shop_proTitle }}</p>
                        <p>{{ item1.shop_proPrice }}￥</p>
                    </div>
                    <hr>
                    <div>
                        <p>下单时间：{{ item.orderDate }}</p>
                        <p>收货地址：{{ item.orderAddress }}</p>
                    </div>
                    <button>查看评价</button>
                </div>
            </van-tab>
            <van-tab title="待发货" name="deliver">
                <div v-for="item in responseData" class="zongdata">
                    <div class="userddtop">
                        <p>订单号:{{ item.orderCode }}</p>
                        <p class="buttomm">待发货</p>
                    </div>
                    <hr>
                    <div v-for="item1 in item.productList" :key="item1.shop_id" class="userddz">
                        <img :src="item1.shop_proImg" alt="">
                        <p>{{ item1.shop_proTitle }}</p>
                        <p>{{ item1.shop_proPrice }}￥</p>
                    </div>
                    <hr>
                    <div>
                        <p>下单时间：{{ item.orderDate }}</p>
                        <p>收货地址：{{ item.orderAddress }}</p>
                    </div>
                    <button>查看评价</button>
                </div>
            </van-tab>
            <van-tab title="待收货" name="receiving">
                <div v-for="item in responseData" class="zongdata">
                    <div class="userddtop">
                        <p>订单号:{{ item.orderCode }}</p>
                        <p class="buttomm">待收货</p>
                    </div>
                    <hr>
                    <div v-for="item1 in item.productList" :key="item1.shop_id" class="userddz">
                        <img :src="item1.shop_proImg" alt="">
                        <p>{{ item1.shop_proTitle }}</p>
                        <p>{{ item1.shop_proPrice }}￥</p>
                    </div>
                    <hr>
                    <div>
                        <p>下单时间：{{ item.orderDate }}</p>
                        <p>收货地址：{{ item.orderAddress }}</p>
                    </div>
                    <button>查看评价</button>
                </div>
            </van-tab>
            <van-tab title="待评价" name="complete">
                <div v-for="item in responseData" class="zongdata">
                    <div class="userddtop">
                        <p>订单号:{{ item.orderCode }}</p>
                        <p class="buttomm">待评价</p>
                    </div>
                    <hr>
                    <div v-for="item1 in item.productList" :key="item1.shop_id" class="userddz">
                        <img :src="item1.shop_proImg" alt="">
                        <p>{{ item1.shop_proTitle }}</p>
                        <p>{{ item1.shop_proPrice }}￥</p>
                    </div>
                    <hr>
                    <div>
                        <p>下单时间：{{ item.orderDate }}</p>
                        <p>收货地址：{{ item.orderAddress }}</p>
                    </div>
                    <button>查看评价</button>
                </div>
            </van-tab>
            <van-tab title="已评价" name="evaluate">
                <div v-for="item in responseData" class="zongdata">
                    <div class="userddtop">
                        <p>订单号:{{ item.orderCode }}</p>
                        <p class="buttomm">已评价</p>
                    </div>
                    <hr>
                    <div v-for="item1 in item.productList" :key="item1.shop_id" class="userddz">
                        <img :src="item1.shop_proImg" alt="">
                        <p>{{ item1.shop_proTitle }}</p>
                        <p>{{ item1.shop_proPrice }}￥</p>
                    </div>
                    <hr>
                    <div>
                        <p>下单时间：{{ item.orderDate }}</p>
                        <p>收货地址：{{ item.orderAddress }}</p>
                    </div>
                    <button>查看评价</button>
                </div>
            </van-tab>
        </van-tabs>

    </div>
</template>

<script setup lang='ts'>
import { useRoute } from 'vue-router';
import { dingdan } from '@/api/http';
import { onMounted, ref } from 'vue';
const Route: any = useRoute();
const hhh = Route.query.type
const activeName: any = ref(hhh);
console.log(Route.query.type);
let responseData = ref()

const clicktab = (id: any) => {
    console.log(id);
    dingdan({ shop_userCode: localStorage.getItem('user_code'), user_shopType: id.name }).then((res: any) => {
        console.log('订单数据', res);
        responseData.value = res.responseData
    })
};
const onClickLeft = () => history.back();
onMounted(() => {
    dingdan({ shop_userCode: localStorage.getItem('user_code'), user_shopType: Route.query.type }).then((res: any) => {
        console.log('订单数据', res);
        responseData.value = res.responseData
    })
})
</script>
<style lang="scss">
#app {
    margin: 0;
    padding: 0;

    .zongdata {
        background-color: rgb(62, 81, 98);
        margin-bottom: 1rem;

        .userddtop {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .buttomm {
                color: rgb(222, 73, 9);
            }
        }

        .userddz {
            display: flex;
            justify-content: space-between;
            align-items: center;

            img {
                width: 4rem;
                height: 4rem;
            }
        }
    }

}
</style>